<template>
	<view class="main-cont">
		<!-- 		<view class="top box box-pack-between box-align-center padd10">
 			<view class="">
				已评分：6人
			</view>
 			<view class="box box-align-center box-pack-center">
				<view class="mr10">
					筛选未评分
				</view>
				<u-switch v-model="checked" active-value="1" active-color="#626BF1" inactive-value="0" @change="change()"></u-switch>
			</view>
		</view> -->
		<view class="mid stu-cont box box-tb box-align-center box-pack-center">
			<view class="bottom box box-tb box-pack-start padd10" v-for="(item,i) in stuList" :key="i">
				<view class="box box-pack-between box-align-center">
					<view class="stu-info box box-pack-start box-align-center">
						<u-avatar :src="item.icon" mode="square" size="78"></u-avatar>
						<view class="box box-tb box-pack-start ml10">
							<view class="stu-name">
								{{item.userName}}
							</view>
							<view class="time">
								{{item.createTime}}
							</view>
						</view>
					</view>
					<!-- 					<view class="score">
						+ {{item.score}}分
					</view> -->
				</view>
				<view class="content">
					<view class="text">
						{{item.cont}}
					</view>
					<view class="images box box-align-start">
						<view class="item mr10" v-for="(ite,index) in item.files" :key="index"
							@click="previewImage(item.files,index)">
							<u-image :src="ite.fileSuffix=='mp4'?ite.firstFrame:ite.url" width="152rpx" height="152rpx">
								<u-loading slot="loading"></u-loading>
							</u-image>
							<u-image src="@/static/home/icon_play.png" width="40rpx" height="40rpx" class="posa"
								v-if="ite.fileSuffix =='mp4'">
								<u-loading slot="loading"></u-loading>
							</u-image>
						</view>
					</view>
				</view>
				<view class="select-list">
					<view class="box box-pack-between box-align-center mt20">
						<view class="">
							未评分
						</view>
						<view class="reset-edit-btn" @click="handlePy(i,item)">
							评分
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom " border-radius="14" height="648rpx" :safe-area-inset-bottom="true">
			<view class="box box-align-center box-pack-between title">
				<view class="">
					{{popTitle}}
				</view>
				<view class="edit-score">
					+ {{editScore}}
				</view>
			</view>
			<view class="">
				<view class="list box box-align-center box-pack-between" :class="{checked:checkedValue.includes(c.id)}"
					v-for="(c,t) in editList" :key="t" @click="checkedBox(c.id,c.score)">
					<view class="">
						{{c.cont}}
					</view>
					<view class="">
						+ {{c.score}}
					</view>
				</view>
			</view>
			<view class="box box-align-center box-pack-center">
				<view class="flex-1" @click="handleCancel()">
					取消
				</view>
				<view class="flex-2" @click="handleConfirm()">
					确定
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				planid: 0,
				sjid: '',
				dclass: uni.getStorageSync("dclass"),
				user: uni.getStorageSync('user'),
				stuList: [],
				editList: [],
				checkRw: {}, //点击修改/评分的时候 暂存此任务

				popTitle: "",
				show: false,
				checked: false,
				checkedValue: [],
				editIndex: 0,
				editScore: 0,
				editScoreArr: []
			}
		},
		onLoad(opt) {
			this.planid = opt.planid;
			this.sjid = opt.sjid;
			this.pyList();
		},
		methods: {
			pyList() {
				let opts = {
					url: '/yclassldsjtask/listWpyStuList',
					method: 'post'
				};
				let params = {
					sjid: this.sjid,
					planid: this.planid,
					classid: this.dclass.id
				};
				//console.log(params);
				this.$api.post(opts, params).then(res => {
					//console.log(res.list);
					this.stuList = res.list;
					if(res.list.length ==0){
						uni.navigateBack()
					}
				})
			},
			handlePy(index, item) {
				this.checkRw = item;
				let opts = {
					url: '/yldsjpfbz/list',
					method: 'post'
				};
				let params = {
					ldsjid: item.sjid
				};
				this.$api.post(opts, params).then(res => {
					this.editList = res.list;
				})
				this.popTitle = "评分"
				this.show = true
			},

			//预览图片视频
			previewImage(val, i) {
				if(val[i].fileSuffix == `mp4`){
					uni.navigateTo({
						url: `/pageHome/video?url=` + val[i].url
					})
				}else{
					let it = JSON.stringify(val)
					uni.setStorage({
						key: 'item',
						data: it
					})
					// uni.setStorageSync("stu_preview",it);
					uni.navigateTo({
						url: `/pageHome/bjqShow?index=` + i + `&val=` + encodeURIComponent(it)
					})
				}
			},
			//评分操作
			checkedBox(id, score) {
				if (this.checkedValue.includes(id)) {
					this.checkedValue = this.checkedValue.filter(function(ele) {
						return ele != id;
					});
					//修改评分
					this.editScore = parseInt(this.editScore) - parseInt(score)
				} else {
					this.checkedValue.push(id);
					//修改评分
					this.editScore = parseInt(this.editScore) + parseInt(score)
				}
			},
			//取消
			handleCancel() {
				this.show = false
			},
			//确定
			handleConfirm() {
				let opts = {
					url: '/yclassldsjtask/stuPyTask',
					method: 'post'
				};
				let params = {
					ltrid: this.checkRw.cltrid,
					trid: this.user.id,
					ldsjid: this.checkRw.sjid,
					trName: this.user.name,
					pfbzids: this.checkedValue
				};
				this.$api.post(opts, {
					str: JSON.stringify(params)
				}).then(res => {
					if(res.code == `0`){
						this.$refs.uToast.show({
							title: '批阅完成',
							type: 'success'
						})
						setTimeout(()=>{
							this.pyList()
						},1000)
					}
				})
				this.show = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.main-cont {
		width: 100%;
		height: 100%;

		.top {
			height: 108rpx;
			background-color: #fff;
		}

		.stu-cont {
			margin: 20rpx auto;
			width: 722rpx;
			padding-bottom: 130rpx;

			.top {
				height: 80rpx;
				border-bottom: 2rpx solid #F0F1F8;
			}

			.bottom {
				margin-bottom: 20rpx;
				width: 100%;
				border-radius: 20rpx;
				background-color: #fff;
				box-shadow: 0px 23rpx 46rpx 0px rgba(205, 207, 230, 0.18);

				.text {
					margin-left: 96rpx;
				}

				.stu-name {
					color: #2F3142;
					font-size: 30rpx;
				}

				.time {
					color: #ABB0C4;
					font-size: 24rpx;
				}

				.score {
					color: #FF5A77;
					font-size: 30rpx;
				}

				.images {
					flex-wrap: wrap;
					margin-left: 96rpx;

					.item {
						position: relative;
						margin-bottom: 20rpx;

						.posa {
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
						}
					}
				}

			}

			.select-list {}

			.reset-edit-btn {
				width: 108rpx;
				height: 48rpx;
				line-height: 48rpx;
				background: #FF5A77;
				border: 1px solid #FF5A77;
				border-radius: 24rpx;
				font-size: 26rpx;
				color: #fff;
				text-align: center;
			}
		}

		.end {
			padding: 0 30rpx;
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 130rpx;
			background-color: rgba(248, 249, 252, .9);

			.reset-pass-btn {
				width: 213rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: linear-gradient(180deg, #7686F6, #626BF1);
				box-shadow: 0px 2rpx 10rpx 0px #DADCE8;
				border-radius: 31rpx;
				text-align: center;
				font-size: 28rpx;
				color: #fff;
			}
		}
	}

	.list {
		padding: 0 30rpx;
		margin: 20rpx auto;
		width: 662rpx;
		height: 68rpx;
		line-height: 68rpx;
		background: #F5F6FF;
		border-radius: 34rpx;
		font-size: 28rpx;
		color: #AEB8CF;

		&.checked {
			color: #7F84E4;
		}
	}

	.flex-1,
	.flex-2 {
		flex: 1;
		text-align: center;
		height: 112rpx;
		line-height: 112rpx;
		font-size: 28rpx;
		background: #F8F9FC;
		color: #1C1C1C;
		font-weight: bold;
	}

	.flex-2 {
		color: #626BF1;
	}

	.title {
		padding: 0 40rpx;
		height: 128rpx;
		line-height: 128rpx;
		border-bottom: 2rpx solid #EEF4F8;
		font-size: 26rpx;
		color: #959AA5;

		.edit-score {
			color: #FF5A77;
		}
	}
</style>
